<template>
  <div class="course-content">
    <div class="header">
      <el-select
        v-model="state.query.status"
        placeholder="直播状态"
        class="filter-item"
        style="width: 240px"
        clearable
        @change="handleSearch()"
      >
        <el-option
          v-for="item in state.liveStatusList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-select
        v-model="state.query.category"
        placeholder="课程类型"
        class="filter-item"
        clearable
        @change="handleSearch()"
      >
        <el-option
          v-for="item in state.courseTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-input
        class="filter-item"
        v-model="state.query.name"
        clearable
        placeholder="请输入内容"
        @change="handleSearch()"
      ></el-input>
    </div>

    <div class="curriculum" @scroll="handleLoadMore">
      <p class="content-title">我的课程</p>
      <el-empty v-if="!state.courseList || state.courseList.length === 0" />
      <courseItems
        v-for="item in state.courseList"
        :key="item.id"
        :item="item"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from "vue";
import courseItems from "@/views/student/courseItems.vue";
import { curriculum } from "@/service/course";
import { courseItem } from "@/views/student/types";

const status = {
  loadMore: "loadMore",
  noMore: "noMore",
  loadFailed: "loadFailed",
};

const state = reactive({
  loadStatus: "",
  courseList: [] as courseItem,
  liveStatusList: [
    {
      value: 1,
      label: "未开播",
    },
    {
      value: 2,
      label: "直播中",
    },
    {
      value: 3,
      label: "已结束",
    },
  ],
  query: { pageNum: 1, pageSize: 10, status: "", name: "", category: "" },
  courseTypeList: [
    {
      value: 1,
      label: "公开课",
    },
    {
      value: 2,
      label: "正课",
    },
  ],
});

async function getCurriculum() {
  const res = await curriculum(state.query);
  state.courseList = res.rows;
  if (state.courseList.length === res.total) {
    state.loadStatus = status.noMore;
  }
}

function handleSearch() {
  state.query.pageNum = 1;
  state.query.pageSize = 10;
  getCurriculum();
}

async function handleLoadMore(e: Event) {
  if ([status.noMore, status.loadMore].includes(state.loadStatus)) return;
  const target = e.target as HTMLElement;
  const bottom = target.scrollTop + target.offsetHeight;
  if (bottom > target.scrollHeight - 50) {
    try {
      state.loadStatus = status.loadMore;
      state.query.pageNum++;
      const res = await curriculum(state.query);
      state.loadStatus = "";
      state.courseList.push(...res.rows);
      if (state.courseList.length === res.total) {
        state.loadStatus = status.noMore;
      }
    } catch (e) {
      state.loadStatus = status.loadFailed;
      console.error(e);
    }
  }
}

onMounted(() => {
  getCurriculum();
});
</script>

<style scoped lang="scss">
.course-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
  .header {
    display: flex;
    align-items: center;

    .filter-item {
      width: 240px;
      margin-right: 20px;
    }
  }

  .curriculum {
    flex: 1;
    overflow: auto;

    .content-title {
      font-size: 22px;
      margin-top: 30px;
      margin-bottom: 20px;
    }
  }
}
</style>
